<template>
  <div class="waper">
    <el-row>
      <el-col :span="24"><h2>图标模块</h2></el-col>
      <el-col :span="24">
        <p class="explain">使用方式</p>
        <ol>
          <li>下载的svg图标，建议是width=100px,heigth=200px;大小的图标</li>
          <li>将所下载的svg图标存放在 src 文件夹下的 svg 文件夹下</li>
          <li>语法: 
            <pre>
                <code class="html hljs xml">
                  //将name属性中的名称替换成自己下载的svg图标名称
                  {{hx}}
                </code>
            </pre>
          </li>
        </ol>
      </el-col>
      <el-col :span="24">

                <el-row :gutter="3"> 

                        <el-col class="icon-container" :span="3" v-for="(icon,index) in icons" :key="index">

                                <div class="ico">
                                    <el-card shadow="hover">
                                        <icon-svg :name="icon" class="site-sidebar__menu-icon"></icon-svg>
                                        <p>{{icon}}</p>
                                    </el-card>
                                </div>
                        
                        </el-col>

                </el-row>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hx:'<icon-svg :name="icon" class="site-sidebar__menu-icon"></icon-svg>',
      icons:[
        'icon-adjustment-horizon',
        'icon-adjustment-vertical',
        'icon-admin',
        'icon-air-balloon',
        'icon-airplane-2',
        'icon-airplane',
        'icon-alarm-clock',
        'icon-alien',
        'icon-aligh-left',
        'icon-align-center',
        'icon-align-left',
        'icon-ambulance',
        'icon-anchor',
        'icon-android',
        'icon-angle-1',
        'icon-angle-2',
        'icon-antenna-1',
        'icon-apron',
        'icon-arrow-backward',
        'icon-arrow-change',
        'icon-arrow-circle-rycycle',
        'icon-arrow-down',
        'icon-arrow-forward',
        'icon-arrow-four-way',
        'icon-arrow-fullscreen-2',
        'icon-arrow-fullscreen',
        'icon-arrow-left-right',
        'icon-arrow-left',
        'icon-arrow-move',
        'icon-arrow-reload',
        'icon-arrow-resize-1',
        'icon-arrow-resize-2',
        'icon-arrow-resize-3',
        'icon-arrow-resize-4',
        'icon-arrow-resize-5',
        'icon-arrow-resize-6',
        'icon-arrow-right',
        'icon-arrow-shuffle',
        'icon-arrow-thick-down',
        'icon-arrow-thick-left',
        'icon-arrow-thick-right',
        'icon-arrow-thick-thin-down',
        'icon-arrow-thick-thin-up',
        'icon-arrow-thick-up',
        'icon-arrow-thin-down',
        'icon-arrow-thin-left-bottom',
        'icon-arrow-thin-left-top',
        'icon-arrow-thin-left',
        'icon-arrow-thin-right-bottom',
        'icon-arrow-thin-right-top',
        'icon-arrow-thin-right',
        'icon-arrow-thin-up',
        'icon-arrow-three-way-1',
        'icon-arrow-three-way-2',
        'icon-arrow-triangle-recycle',
        'icon-arrow-two-left-right',
        'icon-arrow-two-up',
        'icon-arrow-two-way-left-right',
        'icon-arrow-two-way-right-bottom',
        'icon-arrow-two-way-right',
        'icon-arrow-two-way',
        'icon-arrow-up-down',
        'icon-arrow-up',
        'icon-arrow-wave',
        'icon-art-board',
        'icon-askterisk',
        'icon-atm-card',
        'icon-axe',
        'icon-baby-milk-botl',
        'icon-baby-stroller',
        'icon-baby-troller',
        'icon-baby',
        'icon-back-pack',
        'icon-backward-page',
        'icon-badge-name',
        'icon-bag-plus',
        'icon-bag-remove',
        'icon-bag',
        'icon-balance',
        'icon-balloon',
        'icon-bandage',
        'icon-bank',
        'icon-barcode',
        'icon-barrier',
        'icon-baseball-stick',
        'icon-baseball',
        'icon-basket-arrow-down',
        'icon-basket-arrow-left',
        'icon-basket-arrow-right',
        'icon-basket-arrow-up',
        'icon-basket-checked',
        'icon-basket-error',
        'icon-basket-plus',
        'icon-basket-remove',
        'icon-basket',
        'icon-basketball',
        'icon-battery-charging',
        'icon-battery-empty',
        'icon-battery-full',
        'icon-battery-half-2',
        'icon-battery-half',
        'icon-battery-low',
        'icon-bed',
        'icon-bell',
        'icon-bianji',
        'icon-bicycle-1',
        'icon-bicycle-3',
        'icon-bicycle-man',
        'icon-bikini',
        'icon-billiard-ball',
        'icon-binocular',
        'icon-birthday-cake',
        'icon-biscuit',
        'icon-blender',
        'icon-blood-bag',
        'icon-bluetooth',
        'icon-board',
        'icon-boat',
        'icon-bolt',
        'icon-bomb-1',
        'icon-bomb-2',
        'icon-bone',
        'icon-book-1',
        'icon-book-3',
        'icon-book-4',
        'icon-book-@',
        'icon-book-open',
        'icon-book-person',
        'icon-bookcase',
        'icon-bookmark',
        'icon-botl-2',
        'icon-botl-milk',
        'icon-bow-tie',
        'icon-box-download',
        'icon-box-upload',
        'icon-box',
        'icon-bread',
        'icon-briefcase-person',
        'icon-briefcase',
        'icon-brightness',
        'icon-brush-1',
        'icon-brush-2',
        'icon-brush-and-pencil',
        'icon-bubble-chat',
        'icon-bubble-message-dot-2',
        'icon-bubble-message-dot',
        'icon-bubble-message-hi',
        'icon-bubble-message-quote',
        'icon-bubble-message-talk',
        'icon-bubble-message-text',
        'icon-bubble-message',
        'icon-bucket',
        'icon-bug',
        'icon-building',
        'icon-bullet-checked-list',
        'icon-bullet-list-2',
        'icon-bullet-list',
        'icon-bus',
        'icon-button-arrow-down',
        'icon-button-arrow-left',
        'icon-button-arrow-right',
        'icon-button-arrow-up',
        'icon-button-buy',
        'icon-button-error',
        'icon-button-hd',
        'icon-button-play',
        'icon-button-plus',
        'icon-button-remove',
        'icon-button-sale',
        'icon-button-sell',
        'icon-button-starburst',
        'icon-button-triangle-up',
        'icon-button-tv',
        'icon-cabin-cable',
        'icon-cabinet',
        'icon-calculator-2',
        'icon-calculator',
        'icon-calendar-1',
        'icon-calendar-3',
        'icon-calendar-empty',
        'icon-call-forward',
        'icon-call-reply',
        'icon-call',
        'icon-camera-projector',
        'icon-camera-security',
        'icon-camera',
        'icon-can-water',
        'icon-candle',
        'icon-candy-stick',
        'icon-candy',
        'icon-car-garage',
        'icon-car',
        'icon-casette',
        'icon-cashier-machine',
        'icon-castle',
        'icon-caterpillar-machine',
        'icon-cente-justify',
        'icon-chair-1',
        'icon-chair-2',
        'icon-champion-cup',
        'icon-chart-column-decrease',
        'icon-chart-column-increase',
        'icon-chart-column',
        'icon-chart-decrease',
        'icon-chart-piece',
        'icon-checked',
        'icon-cheese',
        'icon-cherry',
        'icon-christmas-mistletoe',
        'icon-christmass-ball',
        'icon-christmass-egg',
        'icon-christmass-hat',
        'icon-christmass-tree',
        'icon-circle-backward',
        'icon-circle-control-pad',
        'icon-circle-drashed',
        'icon-circle-error',
        'icon-circle-forward',
        'icon-circle-help',
        'icon-circle-info',
        'icon-circle-load-left',
        'icon-circle-load-right',
        'icon-circle-plus',
        'icon-circle-remove',
        'icon-circle-star',
        'icon-circle-triangle-down',
        'icon-circle-triangle-left',
        'icon-circle-triangle-right',
        'icon-circle',
        'icon-city',
        'icon-clamp',
        'icon-clapboard-play',
        'icon-clapboard',
        'icon-clip',
        'icon-clipboard-checked',
        'icon-clipboard',
        'icon-clock',
        'icon-close',
        'icon-cloud-cloud',
        'icon-cloud-download',
        'icon-cloud-heavy-rain',
        'icon-cloud-plus',
        'icon-cloud-rain-heavy-rain',
        'icon-cloud-remove',
        'icon-cloud-snow',
        'icon-cloud-sun',
        'icon-cloud-thunder',
        'icon-cloud-upload',
        'icon-cloud',
        'icon-clover',
        'icon-cock-pot',
        'icon-cocktail',
        'icon-coconut',
        'icon-code',
        'icon-coffee-machine',
        'icon-color-picker',
        'icon-column-decrease',
        'icon-column-increase',
        'icon-column-wave',
        'icon-comb',
        'icon-compass',
        'icon-cone',
        'icon-config',
        'icon-congratulation-hat',
        'icon-connect-1',
        'icon-connect-2',
        'icon-contact-book',
        'icon-contacter',
        'icon-contrast',
        'icon-control-pad-',
        'icon-corkscrew',
        'icon-corner-flag',
        'icon-cover-flow',
        'icon-cover-food',
        'icon-cow',
        'icon-cpu',
        'icon-cran',
        'icon-crop',
        'icon-cross-hair-2',
        'icon-cross-hair',
        'icon-crown',
        'icon-cruise',
        'icon-cubic',
        'icon-cup-cake',
        'icon-curtain',
        'icon-customer-support',
        'icon-dangdifill',
        'icon-daohang',
        'icon-dashboard',
        'icon-data-arrow-down',
        'icon-database-download',
        'icon-database-error',
        'icon-database-plus',
        'icon-database-remove',
        'icon-database-share',
        'icon-database-upload',
        'icon-database',
        'icon-delete',
        'icon-delicious-circle',
        'icon-deny',
        'icon-desktop',
        'icon-dial-number-1',
        'icon-dial-number',
        'icon-diamond',
        'icon-dice-1',
        'icon-dice-2',
        'icon-dice-3',
        'icon-dice-5',
        'icon-dice-6-',
        'icon-dice-6',
        'icon-disc-add',
        'icon-disc-deny',
        'icon-disc-download',
        'icon-disc-error',
        'icon-disc-pause',
        'icon-disc-play-2',
        'icon-disc-play',
        'icon-disc-remove',
        'icon-disc-stop',
        'icon-disc-upload',
        'icon-disc',
        'icon-dish',
        'icon-disk-antenna',
        'icon-dna',
        'icon-document-arrow-down',
        'icon-document-arrow-left',
        'icon-document-arrow-right',
        'icon-document-arrow-up',
        'icon-document-backward',
        'icon-document-bullet-list',
        'icon-document-checked',
        'icon-document-copy',
        'icon-document-doc',
        'icon-document-edit',
        'icon-document-error',
        'icon-document-forward',
        'icon-document-help',
        'icon-document-music',
        'icon-document-pdf',
        'icon-document-plus',
        'icon-document-remove',
        'icon-document-rss',
        'icon-document-search',
        'icon-document-star',
        'icon-document-warning',
        'icon-document',
        'icon-dog',
        'icon-door',
        'icon-downstair',
        'icon-downwards-arrow-to-bar',
        'icon-drill',
        'icon-drop-water',
        'icon-dropbox',
        'icon-drum',
        'icon-duanxin',
        'icon-easal',
        'icon-edit',
        'icon-editor',
        'icon-egg',
        'icon-eject',
        'icon-electron',
        'icon-elevator-down',
        'icon-elevator-up',
        'icon-emoticon',
        'icon-end-page',
        'icon-erase',
        'icon-euro',
        'icon-excavator',
        'icon-extinguisher',
        'icon-eye-drop',
        'icon-eye-glass',
        'icon-factory',
        'icon-faucet',
        'icon-feather',
        'icon-female',
        'icon-fence-2',
        'icon-fence',
        'icon-file-box',
        'icon-file-download',
        'icon-file-upload',
        'icon-film-35mm',
        'icon-film',
        'icon-finder',
        'icon-finger-up',
        'icon-fire-alarm',
        'icon-fire-hydrant',
        'icon-fire-wood',
        'icon-fire',
        'icon-first-aid-briefcase',
        'icon-fish',
        'icon-flag',
        'icon-float',
        'icon-floppy-disk',
        'icon-flower-pot',
        'icon-flower',
        'icon-folder-contact',
        'icon-folder-error',
        'icon-folder-music',
        'icon-folder-open',
        'icon-folder-plus',
        'icon-folder-remove',
        'icon-folder-rss',
        'icon-folder-search',
        'icon-folder-share',
        'icon-folder-warning',
        'icon-folder',
        'icon-foot-sign',
        'icon-forcus',
        'icon-forklift',
        'icon-forward-page',
        'icon-fridge',
        'icon-fullscreen',
        'icon-game-1',
        'icon-game-controll',
        'icon-gas-station',
        'icon-gate',
        'icon-gear-1',
        'icon-gear',
        'icon-geren',
        'icon-ghost',
        'icon-gift',
        'icon-glass-water',
        'icon-global',
        'icon-globe',
        'icon-glove',
        'icon-glyph-abacus',
        'icon-golf-ball',
        'icon-golf-flag',
        'icon-guitar',
        'icon-hamburger',
        'icon-hammer-and-wrench',
        'icon-hammer',
        'icon-hand-lamp',
        'icon-hand-switch',
        'icon-hand',
        'icon-handcuff',
        'icon-hanger',
        'icon-hardware',
        'icon-hat-chef',
        'icon-hat',
        'icon-head-set',
        'icon-head',
        'icon-heart-delete',
        'icon-heart-plus',
        'icon-heart-remove',
        'icon-heart-signal',
        'icon-heart',
        'icon-helicopter-pad',
        'icon-helicopter',
        'icon-helm-wheel',
        'icon-helmet',
        'icon-hightheel',
        'icon-history',
        'icon-hockey',
        'icon-home-page',
        'icon-horse-shoe',
        'icon-horse',
        'icon-hospital',
        'icon-house',
        'icon-ice-cream',
        'icon-id-badge',
        'icon-image',
        'icon-in-columns',
        'icon-inbox-download',
        'icon-inbox-upload',
        'icon-infinity-2',
        'icon-infinity',
        'icon-info',
        'icon-ipod',
        'icon-iron',
        'icon-jiesuo',
        'icon-job',
        'icon-jump-backward',
        'icon-jump-double-page-left-right',
        'icon-jump-forward',
        'icon-jump-page-left-right',
        'icon-jump-page-up-down',
        'icon-kette',
        'icon-key-2',
        'icon-key',
        'icon-keyboard',
        'icon-knife',
        'icon-ladder-pool',
        'icon-lamp-desk',
        'icon-lamp',
        'icon-lavabo',
        'icon-law-hammer',
        'icon-layout-1',
        'icon-layout-2',
        'icon-layout-3',
        'icon-layout-4',
        'icon-leaf',
        'icon-left-justify',
        'icon-leftwards-arrow-to-bar',
        'icon-light-alarm',
        'icon-light-bulb',
        'icon-light-house',
        'icon-like-unlike',
        'icon-like',
        'icon-line-two-angle-point',
        'icon-link-1',
        'icon-link-2',
        'icon-link-3',
        'icon-load',
        'icon-lock-unlock',
        'icon-lock',
        'icon-log',
        'icon-louder-2',
        'icon-louder-speaker',
        'icon-magnet',
        'icon-magnifier-2',
        'icon-magnifier',
        'icon-mai',
        'icon-mail-box',
        'icon-mail-empty',
        'icon-mail-has-mail',
        'icon-mail-inbox',
        'icon-mail-send',
        'icon-mail',
        'icon-male',
        'icon-man-doctor',
        'icon-map-3',
        'icon-map-square',
        'icon-mark-snorker',
        'icon-mask-1',
        'icon-mask-2',
        'icon-medal-star',
        'icon-menu',
        'icon-microphone-1',
        'icon-microphone-2',
        'icon-microscope',
        'icon-mobile',
        'icon-mocule',
        'icon-money-$',
        'icon-money-3',
        'icon-money-bag',
        'icon-money-coin',
        'icon-moon-star',
        'icon-motobike',
        'icon-mountain',
        'icon-movie-play',
        'icon-movie-projector',
        'icon-mudedi',
        'icon-multifunction-knife',
        'icon-mushrooms',
        'icon-music-note',
        'icon-music',
        'icon-mustache',
        'icon-network-2',
        'icon-network',
        'icon-newspaper',
        'icon-no-dog',
        'icon-no-smoke',
        'icon-note-2',
        'icon-note',
        'icon-old-phone',
        'icon-open',
        'icon-oss',
        'icon-pallette',
        'icon-paper-clip',
        'icon-paper-plane',
        'icon-paper-roll',
        'icon-paper-shredder',
        'icon-pause',
        'icon-pawn',
        'icon-paypal',
        'icon-pen-nib',
        'icon-pen',
        'icon-pencil',
        'icon-percent',
        'icon-person-2',
        'icon-person-checked',
        'icon-person-door-man',
        'icon-person-error',
        'icon-person-man',
        'icon-person-people',
        'icon-person-plus',
        'icon-person-prison',
        'icon-person-public',
        'icon-person-remove',
        'icon-person-talk',
        'icon-person-woman',
        'icon-person',
        'icon-pet-carrier',
        'icon-phone-fax',
        'icon-phone-number',
        'icon-piano',
        'icon-pick',
        'icon-picture-2',
        'icon-picture-copy',
        'icon-picture',
        'icon-piggy-bank',
        'icon-pill',
        'icon-pin-location-1',
        'icon-pin-location-2',
        'icon-pin-location-add',
        'icon-pin-location-delete',
        'icon-pin-location-love',
        'icon-pin-location-map',
        'icon-pin-location-remove',
        'icon-pin-location',
        'icon-pin-map',
        'icon-ping-pong-racket',
        'icon-pinglun',
        'icon-pipe',
        'icon-pizza',
        'icon-plugin',
        'icon-plus',
        'icon-podium',
        'icon-poker-1',
        'icon-poker-2',
        'icon-poker-3',
        'icon-poker-4',
        'icon-print',
        'icon-puzzle',
        'icon-quote-close',
        'icon-quote-open',
        'icon-radio',
        'icon-radioactive',
        'icon-record',
        'icon-reduce',
        'icon-reel-audio',
        'icon-reel-film',
        'icon-remove',
        'icon-repeat',
        'icon-resize-in-frame',
        'icon-resize-out-frame',
        'icon-retroeexcavadora',
        'icon-ribbon',
        'icon-right-justify',
        'icon-rightwards-arrow-to-bar',
        'icon-ring',
        'icon-road',
        'icon-rocket',
        'icon-role',
        'icon-roller',
        'icon-rss',
        'icon-rugby-ball',
        'icon-ruler',
        'icon-safe-box',
        'icon-safe-pin',
        'icon-satellite',
        'icon-saw',
        'icon-scissor-line-cut',
        'icon-scissor',
        'icon-screen-ful',
        'icon-screen-scale',
        'icon-screw-driver',
        'icon-screw',
        'icon-sd-card',
        'icon-search',
        'icon-seriff',
        'icon-sewing-machine',
        'icon-sewing-roll',
        'icon-shanchu',
        'icon-share-1',
        'icon-share-2',
        'icon-share-3',
        'icon-share-5',
        'icon-sheep',
        'icon-shezhi',
        'icon-shield-2',
        'icon-shield-plus',
        'icon-shield-star',
        'icon-shield',
        'icon-shoucang',
        'icon-shoucangfill',
        'icon-shouye',
        'icon-shovel',
        'icon-shower',
        'icon-sign-board',
        'icon-sign-foot',
        'icon-sign-in',
        'icon-sign-out',
        'icon-sign-p',
        'icon-sign-road-1',
        'icon-sign-road-2',
        'icon-signal-1',
        'icon-signal-2',
        'icon-signal-3',
        'icon-site-map-revert',
        'icon-site-map',
        'icon-skateboard',
        'icon-skull',
        'icon-sleep',
        'icon-slide-show',
        'icon-smartphone',
        'icon-sms',
        'icon-snow',
        'icon-soccer-yard',
        'icon-sock',
        'icon-socket',
        'icon-solar-blind',
        'icon-sos',
        'icon-sound-mute',
        'icon-sound',
        'icon-sousuo',
        'icon-space-ship',
        'icon-spanner',
        'icon-spoon-fork',
        'icon-spray',
        'icon-sql',
        'icon-square-checked',
        'icon-square-dashed-1',
        'icon-square-dashed-2',
        'icon-square-delicious',
        'icon-square-eight-angle-point',
        'icon-square-four-angle-point',
        'icon-square-four',
        'icon-square-plus',
        'icon-square-star',
        'icon-square',
        'icon-stamps',
        'icon-star-cross',
        'icon-star-stick',
        'icon-stele',
        'icon-stelescope',
        'icon-stereo-jack',
        'icon-stethoscope',
        'icon-store',
        'icon-stove',
        'icon-strawberry',
        'icon-street-2',
        'icon-strolley-arrow-down',
        'icon-strolley-arrow-up',
        'icon-strolley-plus',
        'icon-strolley-remove',
        'icon-strolley',
        'icon-subway',
        'icon-suitcase-person',
        'icon-suitcase',
        'icon-suoding',
        'icon-syringe',
        'icon-system',
        'icon-t-shirt',
        'icon-tablet',
        'icon-tag-1',
        'icon-tag-one-plus',
        'icon-tag-price',
        'icon-tag',
        'icon-tank',
        'icon-targer',
        'icon-tea-cup',
        'icon-teeth',
        'icon-telephone-box',
        'icon-telescope',
        'icon-television',
        'icon-tennis-racket-ball',
        'icon-tent-1',
        'icon-tent-camp',
        'icon-test-tube-2',
        'icon-test-tube-empty',
        'icon-test-tube',
        'icon-text-search',
        'icon-thermometer',
        'icon-three-ball',
        'icon-tic-tac-toe',
        'icon-time-glass',
        'icon-time-reload',
        'icon-timer',
        'icon-tixing',
        'icon-toilet',
        'icon-tool-box',
        'icon-traffic-light',
        'icon-train-rail',
        'icon-train',
        'icon-trash',
        'icon-tree',
        'icon-trees',
        'icon-triangle-double-arrow-down',
        'icon-triangle-double-arrow-left',
        'icon-triangle-double-arrow-right',
        'icon-triangle-double-arrow-up',
        'icon-triangle-down',
        'icon-triangle-left',
        'icon-triangle-right',
        'icon-triangle-up',
        'icon-trolley-2',
        'icon-trolley-arrow-down',
        'icon-trolley-arrow-up',
        'icon-trolley-briefcase',
        'icon-trolley-error',
        'icon-trolley-full',
        'icon-trolley-plus',
        'icon-trolley-remove',
        'icon-truck',
        'icon-trumpet',
        'icon-tubiao',
        'icon-turn-off',
        'icon-two-arrow-down',
        'icon-two-arrow-in-down-up',
        'icon-two-arrow-in-left-right',
        'icon-two-arrow-left',
        'icon-two-arrow-right',
        'icon-typewriter',
        'icon-umberlla-chair',
        'icon-umbrella-close',
        'icon-umbrella-open',
        'icon-umbrella-sea',
        'icon-upstair',
        'icon-upwards-arrow-to-bar',
        'icon-upwards-arrow-with-loop',
        'icon-usb',
        'icon-view',
        'icon-wacom-tablet',
        'icon-wall',
        'icon-wallet',
        'icon-wash-machine-2',
        'icon-wash-machine',
        'icon-watch',
        'icon-webcam',
        'icon-weight-down',
        'icon-weight-kilograms',
        'icon-weight-up',
        'icon-wheel-chair',
        'icon-wheel-steel',
        'icon-wieght',
        'icon-wifi-1',
        'icon-wind-turbines',
        'icon-window',
        'icon-wood-stove',
        'icon-wrench-screwdriver',
        'icon-wrench',
        'icon-xiangqu',
        'icon-xiangqufill',
        'icon-yen',
        'icon-ying-yang',
        'icon-zhedie',
        'icon-zhi',
        'icon-zip',
        'icon-zonghe',
        'icon-zoom-in',
        'icon-zoom-out',
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.explain{
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}
li {
  margin: 0 10px;
  line-height: 33px;
}
.hljs, .hljs-tag, .hljs-subst {
    color: #f8f8f2;
}
.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f;
}
.icon-container{
  margin-bottom: 20px;
}
pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}
code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}
code, kbd, pre, samp {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
code, kbd, pre, samp {
    font-family: monospace,monospace;
    font-size: 1em;
}
.el-card {
    border: 0px;
}
.ico{
    text-align: center;
}
.ico .site-sidebar__menu-icon{
  width:1.7em !important;
  height:1.7em !important;
}
.ico p{
      padding-top: 15px;
      height: 50px;

}
</style>